/***************************************************************************
*   Copyright (C) 2011 by Chuck Gao & Alex Liu                             *
*                                                                          *
*   This program is free software: you can redistribute it and/or modify   *
*   it under the terms of the GNU General Public License as published by   *
*   the Free Software Foundation, either version 3 of the License, or      *
*   (at your option) any later version.                                    *
*                                                                          *
*   This program is distributed in the hope that it will be useful,        *
*   but WITHOUT ANY WARRANTY; without even the implied warranty of         *
*   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the          *
*   GNU General Public License for more details.                           *
*                                                                          *
*   You should have received a copy of the GNU General Public License      *
*   along with this program.  If not, see <http://www.gnu.org/licenses/>.  *
*                                                                          *
*   Contact author: chuckgao.cg@gmail.com                                  *
*                   alex2202375@gmail.com                                  *
***************************************************************************/

import QtQuick 1.0
import com.nokia.symbian 1.1
import Qt.labs.components 1.1

Item {
    id: recipeTabView
    width: 360
    height: 560

    property int contextMargin: 16
    property int btnGroupMargin: 6

    ButtonRow {
        id: btnGroup
        width: parent.width - btnGroupMargin * 2
        height: 60
        anchors.top: parent.top
        anchors.horizontalCenter: parent.horizontalCenter
        exclusive: true
        checkedButton: b2

        Button {
            text: "简介"
            onClicked: {
                recipeTabView.state = "brief"
            }
        }
        Button {
            text: "食材"
            onClicked: {
                recipeTabView.state = "ingredient"
            }
        }
        Button {
            text: "营养"
            onClicked: {
                recipeTabView.state = "nurtration"
            }
        }
        Button {
            text: "制作"
            onClicked: {
                recipeTabView.state = "cookingMethod"
            }
        }
    }

    // Tab bar
//    Row {
//        id: tabBar
//        width: parent.width
//        height: 60
//        anchors.top: parent.top
//        anchors.left: parent.left

//        Text {
//            id: briefDescription
//            width: tabBar.width/4
//            height: parent.height
//            text: "简介";
//            font.family: "Freestyle Script"
//            font.pointSize: 32
//            horizontalAlignment: Text.AlignHCenter
//            verticalAlignment: Text.AlignVCenter

//            MouseArea {
//                anchors.fill: parent
//                onClicked: {
//                    recipeTabView.state = "brief"
//                }
//            }
//        }

//        Text {
//            id: ingredient
//            width: tabBar.width/4
//            height: parent.height
//            text: "食材"
//            font.family: "Freestyle Script"
//            font.pointSize: 32
//            horizontalAlignment: Text.AlignHCenter
//            verticalAlignment: Text.AlignVCenter
//            color: "white"

//            MouseArea {
//                anchors.fill: parent
//                onClicked: {
//                    recipeTabView.state = "ingredient"
//                }
//            }
//        }

//        Text {
//            id: nurtration
//            width: tabBar.width/4
//            height: parent.height
//            text: "营养"
//            font.family: "Freestyle Script"
//            font.pointSize: 32
//            horizontalAlignment: Text.AlignHCenter
//            verticalAlignment: Text.AlignVCenter
//            color: "white"

//            MouseArea {
//                anchors.fill: parent
//                onClicked: {
//                    recipeTabView.state = "nurtration"
//                }
//            }
//        }

//        Text {
//            id: cookingMethod
//            width: tabBar.width/4
//            height: parent.height
//            text: "制作"
//            font.family: "Freestyle Script"
//            font.pointSize: 32
//            horizontalAlignment: Text.AlignHCenter
//            verticalAlignment: Text.AlignVCenter
//            color: "white"

//            MouseArea {
//                anchors.fill: parent
//                onClicked: {
//                    recipeTabView.state = "cookingMethod"
//                }
//            }
//        }
//    }

    Item {
        id: introductionView
        width: parent.width
        height: 500
        anchors.top: btnGroup.bottom
        anchors.left: parent.left
        Flickable {
            anchors.fill: parent
            contentWidth: parent.width
            contentHeight: myIntroduction.height + 1
            interactive: true
            clip: true

            Introduction {
                id: myIntroduction
                anchors.centerIn: parent
                width: introductionView.width - contextMargin
//                height: introductionView.height - contextMargin
            }
        }
    }

    Item {
        id: ingredientView
        width: parent.width
        height: 520
        anchors.top: btnGroup.bottom
        anchors.left: parent.left
        Flickable {
            anchors.fill: parent
            contentWidth: parent.width
            contentHeight: myIngredientList.height + 1
            interactive: true
            clip: true

            IngredientList {
                id: myIngredientList
                anchors.centerIn: parent
                width: ingredientView.width - contextMargin
                height: ingredientView.height - contextMargin
            }
        }
    }

    Item {
        id: nurtrationView
        width: parent.width
        height: 500
        anchors.top: btnGroup.bottom
        anchors.left: parent.left
        Flickable {
            anchors.fill: parent
            contentWidth: parent.width
            contentHeight: fact.height
            interactive: true
            clip: true

            NurtritionFacts {
                id: fact
                anchors.centerIn: parent
                width: nurtrationView.width - contextMargin
            }
        }
    }

    Item {
        id: cookingMethodView
        width: parent.width
        height: 500
        anchors.top: btnGroup.bottom
        anchors.left: parent.left

        Flickable {
            anchors.fill: parent
            contentWidth: parent.width
            contentHeight: method.height
            interactive: true
            clip: true

            CookingMethodBook {
                id: method
                anchors.centerIn: parent
                width: cookingMethodView.width - contextMargin
//                height: cookingMethodView.height - contextMargin
            }
        }
    }

    state: "brief"

    states: [
        State {
            name: "brief"
            PropertyChanges {
                target: introductionView
                opacity: 1
            }
            PropertyChanges {
                target: nurtrationView
                opacity: 0
            }
            PropertyChanges {
                target: ingredientView
                opacity: 0
            }
            PropertyChanges {
                target: cookingMethodView
                opacity: 0
            }
        },
        State {
            name: "nurtration"
            PropertyChanges {
                target: introductionView
                opacity: 0
            }
            PropertyChanges {
                target: nurtrationView
                opacity: 1
            }
            PropertyChanges {
                target: ingredientView
                opacity: 0
            }
            PropertyChanges {
                target: cookingMethodView
                opacity: 0
            }
        },
        State {
            name: "ingredient"
            PropertyChanges {
                target: introductionView
                opacity: 0
            }
            PropertyChanges {
                target: nurtrationView
                opacity: 0
            }
            PropertyChanges {
                target: ingredientView
                opacity: 1
            }
            PropertyChanges {
                target: cookingMethodView
                opacity: 0
            }
        },
        State {
            name: "cookingMethod"
            PropertyChanges {
                target: introductionView
                opacity: 0
            }
            PropertyChanges {
                target: nurtrationView
                opacity: 0
            }
            PropertyChanges {
                target: ingredientView
                opacity: 0
            }
            PropertyChanges {
                target: cookingMethodView
                opacity: 1
            }
        }
    ]

    transitions: [
        Transition {
            from: "*"
            to: "*"
            reversible: true
            PropertyAnimation { targets: [introductionView, nurtrationView, ingredientView, cookingMethodView]; properties: "opacity"; duration: 400 }
        }
    ]
}
